<template>
  <div class="workflow-nav-system">
    <!-- 顶部工作流导航 -->
    <div class="workflow-header">
      <div class="workflow-brand">
        <el-icon><Grid /></el-icon>
        <span>ERP工作流</span>
      </div>
      
      <div class="workflow-tabs">
        <div
          v-for="workflow in workflows"
          :key="workflow.id"
          class="workflow-tab"
          :class="{ 'active': activeWorkflow === workflow.id }"
          @click="selectWorkflow(workflow)"
        >
          <div class="tab-icon">
            <el-icon><component :is="workflow.icon" /></el-icon>
          </div>
          <div class="tab-content">
            <div class="tab-title">{{ workflow.name }}</div>
            <div class="tab-progress">
              <el-progress 
                :percentage="workflow.progress" 
                :show-text="false" 
                :stroke-width="4"
              />
              <span class="progress-text">{{ workflow.progress }}%</span>
            </div>
          </div>
          <div class="tab-status">
            <el-tag size="small" :type="workflow.statusType">
              {{ workflow.status }}
            </el-tag>
          </div>
        </div>
      </div>

      <div class="workflow-actions">
        <el-button text @click="toggleWorkflowView">
          <el-icon><component :is="workflowView === 'timeline' ? 'Grid' : 'List'" /></el-icon>
          {{ workflowView === 'timeline' ? '时间线' : '列表' }}
        </el-button>
        <el-button text @click="toggleNotifications">
          <el-icon><Bell /></el-icon>
          <el-badge :value="3" class="notification-badge" />
        </el-button>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 左侧流程面板 -->
      <div class="process-sidebar" :class="{ 'collapsed': isProcessSidebarCollapsed }">
        <div class="sidebar-header">
          <h3>{{ activeWorkflowName }}</h3>
          <el-button text @click="toggleProcessSidebar">
            <el-icon><component :is="isProcessSidebarCollapsed ? 'Expand' : 'Fold'" /></el-icon>
          </el-button>
        </div>

        <div class="sidebar-content">
          <!-- 流程步骤 -->
          <div class="process-steps">
            <div
              v-for="(step, index) in processSteps"
              :key="step.id"
              class="process-step"
              :class="{ 
                'completed': step.status === 'completed',
                'active': step.status === 'active',
                'pending': step.status === 'pending'
              }"
            >
              <div class="step-indicator">
                <el-icon v-if="step.status === 'completed'"><Check /></el-icon>
                <span v-else>{{ index + 1 }}</span>
              </div>
              <div class="step-content">
                <div class="step-title">{{ step.title }}</div>
                <div class="step-desc">{{ step.description }}</div>
                <div class="step-meta">
                  <span class="step-time">{{ step.time }}</span>
                  <el-tag v-if="step.badge" size="small" :type="step.badgeType">
                    {{ step.badge }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>

          <!-- 相关功能 -->
          <div class="related-functions">
            <h4>相关功能</h4>
            <div
              v-for="func in relatedFunctions"
              :key="func.id"
              class="function-item"
              @click="openFunction(func)"
            >
              <el-icon><component :is="func.icon" /></el-icon>
              <span>{{ func.name }}</span>
              <el-badge v-if="func.count" :value="func.count" class="function-badge" />
            </div>
          </div>
        </div>
      </div>

      <!-- 中间工作区域 -->
      <div class="work-area">
        <!-- 工作区头部 -->
        <div class="work-header">
          <div class="work-breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item v-for="crumb in workBreadcrumbs" :key="crumb.path">
                <el-icon v-if="crumb.icon"><component :is="crumb.icon" /></el-icon>
                {{ crumb.name }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          
          <div class="work-actions">
            <el-button size="small" @click="refreshWorkArea">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
            <el-button size="small" @click="exportWorkflow">
              <el-icon><Download /></el-icon>
              导出
            </el-button>
          </div>
        </div>

        <!-- 工作区内容 -->
        <div class="work-content">
          <!-- 时间线视图 -->
          <div v-if="workflowView === 'timeline'" class="timeline-view">
            <div class="timeline-container">
              <div
                v-for="(item, index) in timelineItems"
                :key="item.id"
                class="timeline-item"
                :class="{ 'left': index % 2 === 0, 'right': index % 2 === 1 }"
              >
                <div class="timeline-marker">
                  <el-icon><component :is="item.icon" /></el-icon>
                </div>
                <div class="timeline-content">
                  <div class="timeline-header">
                    <h4>{{ item.title }}</h4>
                    <span class="timeline-time">{{ item.time }}</span>
                  </div>
                  <div class="timeline-body">
                    <p>{{ item.description }}</p>
                    <div class="timeline-actions">
                      <el-button size="small" @click="handleTimelineItem(item)">
                        处理
                      </el-button>
                      <el-button size="small" text @click="viewTimelineItem(item)">
                        查看
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 列表视图 -->
          <div v-else class="list-view">
            <el-table :data="workflowItems" style="width: 100%">
              <el-table-column prop="title" label="任务" width="200">
                <template #default="{ row }">
                  <div class="table-title">
                    <el-icon><component :is="row.icon" /></el-icon>
                    <span>{{ row.title }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="description" label="描述" />
              <el-table-column prop="assignee" label="负责人" width="120" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag size="small" :type="row.statusType">{{ row.status }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="deadline" label="截止时间" width="150" />
              <el-table-column label="操作" width="120">
                <template #default="{ row }">
                  <el-button size="small" text @click="handleItem(row)">处理</el-button>
                  <el-button size="small" text @click="viewItem(row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <!-- 右侧任务面板 -->
      <div class="task-panel" :class="{ 'collapsed': isTaskPanelCollapsed }">
        <div class="panel-header">
          <h3>任务面板</h3>
          <el-button text @click="toggleTaskPanel">
            <el-icon><component :is="isTaskPanelCollapsed ? 'Expand' : 'Fold'" /></el-icon>
          </el-button>
        </div>

        <div class="panel-content">
          <!-- 我的任务 -->
          <div class="task-section">
            <h4>我的任务</h4>
            <div class="task-list">
              <div
                v-for="task in myTasks"
                :key="task.id"
                class="task-item"
                :class="{ 'urgent': task.urgent }"
                @click="openTask(task)"
              >
                <div class="task-icon">
                  <el-icon><component :is="task.icon" /></el-icon>
                </div>
                <div class="task-content">
                  <div class="task-title">{{ task.title }}</div>
                  <div class="task-meta">
                    <span class="task-time">{{ task.deadline }}</span>
                    <el-tag v-if="task.priority" size="small" :type="task.priorityType">
                      {{ task.priority }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 待办事项 -->
          <div class="todo-section">
            <h4>待办事项</h4>
            <div class="todo-list">
              <div
                v-for="todo in todoItems"
                :key="todo.id"
                class="todo-item"
                @click="toggleTodo(todo)"
              >
                <el-checkbox 
                  :model-value="todo.completed"
                  @change="toggleTodo(todo)"
                />
                <span class="todo-text" :class="{ 'completed': todo.completed }">
                  {{ todo.text }}
                </span>
              </div>
            </div>
          </div>

          <!-- 工作统计 -->
          <div class="work-stats-section">
            <h4>工作统计</h4>
            <div class="stats-grid">
              <div class="stat-item">
                <div class="stat-value">{{ workStats.completed }}</div>
                <div class="stat-label">已完成</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ workStats.pending }}</div>
                <div class="stat-label">进行中</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ workStats.overdue }}</div>
                <div class="stat-label">已逾期</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 工作流详情面板 -->
    <transition name="panel-slide">
      <div v-if="showWorkflowDetail" class="workflow-detail-panel">
        <div class="detail-header">
          <h3>{{ selectedWorkflow?.name }}</h3>
          <el-button text @click="closeWorkflowDetail">
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
        <div class="detail-content">
          <div class="workflow-info">
            <div class="info-item">
              <label>状态:</label>
              <el-tag :type="selectedWorkflow?.statusType">{{ selectedWorkflow?.status }}</el-tag>
            </div>
            <div class="info-item">
              <label>进度:</label>
              <el-progress :percentage="selectedWorkflow?.progress" />
            </div>
            <div class="info-item">
              <label>负责人:</label>
              <span>{{ selectedWorkflow?.assignee }}</span>
            </div>
            <div class="info-item">
              <label>截止时间:</label>
              <span>{{ selectedWorkflow?.deadline }}</span>
            </div>
          </div>
          <div class="workflow-description">
            <h4>描述</h4>
            <p>{{ selectedWorkflow?.description }}</p>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Grid, Bell, Check, Refresh, Download, Expand, Fold, Close,
  ShoppingCart, ShoppingBag, Warehouse, Money, UserFilled, Setting,
  Document, List, TrendCharts, DataBoard, User, Clock, Warning
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const activeWorkflow = ref('sales-process')
const workflowView = ref('timeline')
const isProcessSidebarCollapsed = ref(false)
const isTaskPanelCollapsed = ref(false)
const showWorkflowDetail = ref(false)
const selectedWorkflow = ref(null)

// 工作流数据
const workflows = ref([
  {
    id: 'sales-process',
    name: '销售流程',
    icon: 'ShoppingCart',
    progress: 75,
    status: '进行中',
    statusType: 'warning',
    assignee: '张三',
    deadline: '2024-01-20',
    description: '从客户询价到订单完成的完整销售流程'
  },
  {
    id: 'purchase-process',
    name: '采购流程',
    icon: 'ShoppingBag',
    progress: 45,
    status: '待审批',
    statusType: 'info',
    assignee: '李四',
    deadline: '2024-01-18',
    description: '从需求申请到采购入库的完整采购流程'
  },
  {
    id: 'inventory-process',
    name: '库存流程',
    icon: 'Warehouse',
    progress: 90,
    status: '即将完成',
    statusType: 'success',
    assignee: '王五',
    deadline: '2024-01-15',
    description: '库存盘点和管理流程'
  }
])

// 流程步骤数据
const processSteps = ref([
  {
    id: 'step-1',
    title: '客户询价',
    description: '接收客户询价信息',
    status: 'completed',
    time: '2024-01-10 09:00',
    badge: '已完成',
    badgeType: 'success'
  },
  {
    id: 'step-2',
    title: '报价处理',
    description: '准备产品报价单',
    status: 'completed',
    time: '2024-01-10 14:30',
    badge: '已完成',
    badgeType: 'success'
  },
  {
    id: 'step-3',
    title: '订单确认',
    description: '客户确认订单详情',
    status: 'active',
    time: '2024-01-15 10:00',
    badge: '进行中',
    badgeType: 'warning'
  },
  {
    id: 'step-4',
    title: '生产安排',
    description: '安排生产计划',
    status: 'pending',
    time: '待定',
    badge: '待处理',
    badgeType: 'info'
  },
  {
    id: 'step-5',
    title: '发货配送',
    description: '安排物流配送',
    status: 'pending',
    time: '待定',
    badge: '待处理',
    badgeType: 'info'
  }
])

// 相关功能数据
const relatedFunctions = ref([
  { id: 'customer-mgmt', name: '客户管理', icon: 'User', count: 0 },
  { id: 'product-catalog', name: '产品目录', icon: 'List', count: 0 },
  { id: 'pricing-tool', name: '定价工具', icon: 'Money', count: 0 },
  { id: 'order-tracking', name: '订单跟踪', icon: 'TrendCharts', count: 0 }
])

// 时间线数据
const timelineItems = ref([
  {
    id: 'timeline-1',
    title: '客户询价',
    description: '客户通过电话询价，询问产品A的价格和库存情况',
    icon: 'User',
    time: '2024-01-10 09:00',
    status: 'completed'
  },
  {
    id: 'timeline-2',
    title: '报价准备',
    description: '销售团队准备详细报价单，包含产品规格和价格',
    icon: 'Document',
    time: '2024-01-10 14:30',
    status: 'completed'
  },
  {
    id: 'timeline-3',
    title: '客户确认',
    description: '客户确认订单详情，包括数量、价格和交货时间',
    icon: 'Check',
    time: '2024-01-15 10:00',
    status: 'active'
  },
  {
    id: 'timeline-4',
    title: '生产安排',
    description: '根据订单要求安排生产计划',
    icon: 'Setting',
    time: '待定',
    status: 'pending'
  }
])

// 工作流项目数据
const workflowItems = ref([
  {
    id: 1,
    title: '销售订单 #SO-001',
    description: '客户张三的销售订单处理',
    icon: 'Document',
    assignee: '张三',
    status: '进行中',
    statusType: 'warning',
    deadline: '2024-01-20'
  },
  {
    id: 2,
    title: '客户信息更新',
    description: '更新客户李四的联系信息',
    icon: 'User',
    assignee: '李四',
    status: '已完成',
    statusType: 'success',
    deadline: '2024-01-15'
  },
  {
    id: 3,
    title: '产品报价',
    description: '为新产品准备报价单',
    icon: 'Money',
    assignee: '王五',
    status: '待处理',
    statusType: 'info',
    deadline: '2024-01-25'
  }
])

// 我的任务数据
const myTasks = ref([
  {
    id: 'task-1',
    title: '审核销售订单',
    description: '审核销售订单 #SO-001',
    icon: 'Document',
    deadline: '2024-01-20',
    priority: '高',
    priorityType: 'danger',
    urgent: true
  },
  {
    id: 'task-2',
    title: '更新客户信息',
    description: '更新客户联系信息',
    icon: 'User',
    deadline: '2024-01-18',
    priority: '中',
    priorityType: 'warning',
    urgent: false
  }
])

// 待办事项数据
const todoItems = ref([
  { id: 'todo-1', text: '完成销售报表', completed: false },
  { id: 'todo-2', text: '联系供应商', completed: true },
  { id: 'todo-3', text: '更新产品信息', completed: false },
  { id: 'todo-4', text: '准备月度总结', completed: false }
])

// 工作统计
const workStats = ref({
  completed: 12,
  pending: 5,
  overdue: 2
})

// 计算属性
const activeWorkflowName = computed(() => {
  const workflow = workflows.value.find(w => w.id === activeWorkflow.value)
  return workflow?.name || ''
})

const workBreadcrumbs = computed(() => {
  return [
    { name: '首页', path: '/', icon: 'HomeFilled' },
    { name: '工作流', path: '/workflow', icon: 'Grid' },
    { name: activeWorkflowName.value, path: `/${activeWorkflow.value}`, icon: 'List' }
  ]
})

// 方法
const selectWorkflow = (workflow) => {
  activeWorkflow.value = workflow.id
  selectedWorkflow.value = workflow
  showWorkflowDetail.value = true
  updateProcessSteps(workflow.id)
}

const updateProcessSteps = (workflowId) => {
  // 根据工作流ID更新流程步骤
  const workflowData = {
    'sales-process': [
      {
        id: 'step-1',
        title: '客户询价',
        description: '接收客户询价信息',
        status: 'completed',
        time: '2024-01-10 09:00',
        badge: '已完成',
        badgeType: 'success'
      }
    ],
    'purchase-process': [
      {
        id: 'step-1',
        title: '需求申请',
        description: '提交采购需求申请',
        status: 'completed',
        time: '2024-01-08 10:00',
        badge: '已完成',
        badgeType: 'success'
      }
    ]
  }
  
  processSteps.value = workflowData[workflowId] || []
}

const toggleProcessSidebar = () => {
  isProcessSidebarCollapsed.value = !isProcessSidebarCollapsed.value
}

const toggleTaskPanel = () => {
  isTaskPanelCollapsed.value = !isTaskPanelCollapsed.value
}

const toggleWorkflowView = () => {
  workflowView.value = workflowView.value === 'timeline' ? 'list' : 'timeline'
}

const refreshWorkArea = () => {
  ElMessage.success('工作区已刷新')
}

const exportWorkflow = () => {
  ElMessage.info('导出工作流数据')
}

const openFunction = (func) => {
  console.log('打开功能:', func)
}

const handleTimelineItem = (item) => {
  console.log('处理时间线项目:', item)
}

const viewTimelineItem = (item) => {
  console.log('查看时间线项目:', item)
}

const handleItem = (item) => {
  console.log('处理项目:', item)
}

const viewItem = (item) => {
  console.log('查看项目:', item)
}

const openTask = (task) => {
  console.log('打开任务:', task)
}

const toggleTodo = (todo) => {
  todo.completed = !todo.completed
}

const closeWorkflowDetail = () => {
  showWorkflowDetail.value = false
  selectedWorkflow.value = null
}

const toggleNotifications = () => {
  ElMessage.info('通知功能')
}

// 生命周期
onMounted(() => {
  updateProcessSteps(activeWorkflow.value)
})
</script>

<style scoped>
.workflow-nav-system {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

/* 顶部工作流导航 */
.workflow-header {
  height: 80px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 20px;
}

.workflow-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
}

.workflow-tabs {
  flex: 1;
  display: flex;
  gap: 12px;
  overflow-x: auto;
}

.workflow-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 250px;
  border: 2px solid transparent;
  background: #f5f7fa;
}

.workflow-tab:hover {
  background: #ecf5ff;
  border-color: #e4e7ed;
}

.workflow-tab.active {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

.tab-icon {
  font-size: 20px;
}

.tab-content {
  flex: 1;
}

.tab-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.tab-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-text {
  font-size: 12px;
  min-width: 30px;
}

.tab-status {
  margin-left: 8px;
}

.workflow-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧流程面板 */
.process-sidebar {
  width: 300px;
  background: white;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.process-sidebar.collapsed {
  width: 0;
  border-right: none;
}

.sidebar-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
}

.sidebar-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.sidebar-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.process-steps {
  margin-bottom: 24px;
}

.process-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all 0.2s;
}

.process-step.completed {
  background: #f0f9ff;
  border-left: 4px solid #67c23a;
}

.process-step.active {
  background: #fef0e6;
  border-left: 4px solid #e6a23c;
}

.process-step.pending {
  background: #f5f7fa;
  border-left: 4px solid #909399;
}

.step-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.process-step.completed .step-indicator {
  background: #67c23a;
  color: white;
}

.process-step.active .step-indicator {
  background: #e6a23c;
  color: white;
}

.process-step.pending .step-indicator {
  background: #909399;
  color: white;
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.step-desc {
  font-size: 12px;
  color: #606266;
  margin-bottom: 8px;
}

.step-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step-time {
  font-size: 11px;
  color: #909399;
}

.related-functions {
  margin-top: 24px;
}

.related-functions h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.function-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 4px;
}

.function-item:hover {
  background: #f5f7fa;
}

.function-badge {
  margin-left: auto;
}

/* 中间工作区域 */
.work-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.work-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
}

.work-breadcrumb {
  display: flex;
  align-items: center;
}

.work-actions {
  display: flex;
  gap: 8px;
}

.work-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #f5f7fa;
}

/* 时间线视图 */
.timeline-view {
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.timeline-container {
  position: relative;
}

.timeline-container::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e4e7ed;
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
}

.timeline-item.left {
  flex-direction: row;
}

.timeline-item.right {
  flex-direction: row-reverse;
}

.timeline-marker {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 1;
  position: relative;
}

.timeline-content {
  flex: 1;
  max-width: 45%;
  margin: 0 20px;
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.timeline-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.timeline-time {
  font-size: 12px;
  color: #909399;
}

.timeline-body p {
  margin: 0 0 12px 0;
  color: #606266;
  line-height: 1.5;
}

.timeline-actions {
  display: flex;
  gap: 8px;
}

/* 列表视图 */
.list-view {
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.table-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 右侧任务面板 */
.task-panel {
  width: 320px;
  background: white;
  border-left: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.task-panel.collapsed {
  width: 0;
  border-left: none;
}

.panel-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
}

.panel-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.panel-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.task-section,
.todo-section,
.work-stats-section {
  margin-bottom: 24px;
}

.task-section h4,
.todo-section h4,
.work-stats-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}

.task-item:hover {
  background: #f5f7fa;
  border-color: #e4e7ed;
}

.task-item.urgent {
  border-color: #f56c6c;
  background: #fef0f0;
}

.task-icon {
  width: 32px;
  height: 32px;
  background: #ecf5ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
}

.task-content {
  flex: 1;
}

.task-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.task-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.task-time {
  font-size: 11px;
  color: #909399;
}

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.todo-item:hover {
  background: #f5f7fa;
}

.todo-text {
  flex: 1;
  font-size: 13px;
}

.todo-text.completed {
  text-decoration: line-through;
  color: #909399;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat-item {
  text-align: center;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 6px;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 11px;
  color: #909399;
}

/* 工作流详情面板 */
.workflow-detail-panel {
  position: fixed;
  top: 80px;
  right: 0;
  width: 400px;
  height: calc(100vh - 80px);
  background: white;
  border-left: 1px solid #e4e7ed;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.detail-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
}

.detail-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.detail-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.workflow-info {
  margin-bottom: 24px;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f5f7fa;
}

.info-item label {
  font-weight: 600;
  color: #303133;
}

.workflow-description h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.workflow-description p {
  margin: 0;
  color: #606266;
  line-height: 1.5;
}

/* 动画 */
.panel-slide-enter-active,
.panel-slide-leave-active {
  transition: all 0.3s ease;
}

.panel-slide-enter-from {
  transform: translateX(100%);
}

.panel-slide-leave-to {
  transform: translateX(100%);
}

/* 响应式 */
@media (max-width: 1200px) {
  .task-panel {
    width: 280px;
  }
  
  .process-sidebar {
    width: 260px;
  }
}

@media (max-width: 768px) {
  .workflow-tabs {
    display: none;
  }
  
  .process-sidebar,
  .task-panel {
    position: fixed;
    top: 80px;
    height: calc(100vh - 80px);
    z-index: 999;
  }
  
  .process-sidebar {
    left: 0;
  }
  
  .task-panel {
    right: 0;
  }
  
  .timeline-content {
    max-width: 100%;
    margin: 0 10px;
  }
}
</style>
